<template>
	<view class="container">
		<view class="hearder">
			<view class="status-bar">

			</view>
			<uni-nav-bar left-icon="left" @clickLeft="leftback" title="选择科室" :border="false" :height="barhig"
				class="header-title" />
			<view class="content" >
				<view class="hearder-serch">
					<input class="uni-input" confirm-type="search" placeholder="搜索科室" />
					<uni-icons type="search" size="24" color="#ccc" class="search"></uni-icons>
				</view>

			</view>
		</view>

		<view class="work-con">
			<view class="work-left">
				<view class="nav-list" hover-class="hover" v-for="item in navLi" :key="item.department_one_id" @click="sunnav(item.department_one_id)">
					<view class="abs-tag" v-if="item.show">
					</view>
					<text class="fontis">{{item.department_one_name}}</text>
				</view>

			</view>
			<view class="work-right">
				<view class="subbaner">
					<image src="../../../../static/images/banner1.png" mode="widthFix" class="img-subban"></image>

				</view>
				<view class="work-bar">
					<deskworkLi v-for="item in navlicontent" :navcontent="item" @navliback="navliback" :key="item.department_two_id"></deskworkLi>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import deskworkLi from '@/components/bookingReg/deskworkLi/deskworkLi.vue'
	import {setkeshi,seterkeshi} from '@/utils/axios.js'
	import {
		ref,
		reactive,
		toRefs,

	} from 'vue'
	export default {
		components: {
			deskworkLi
		},
		setup() {

			const data = reactive({
				navLi: [
				],
				navlicontent: [],
				barhig: '120rpx',
				
			})
			onLoad((option) => {
                  console.log(option);
			})
			setkeshi().then(res=>{
				console.log(res);
				data.navLi=res.data
				data.navLi.forEach(item=>{
					if(item.department_one_id==1){
						item.show=true
					}else{
						item.show=false
					}
				})
			})
			seterkeshi().then(res=>{				
				data.navlicontent=res.data
			})
			const sunnav = (obj) => {
				console.log(obj);
				let id=obj
				seterkeshi(id).then(res=>{
					data.navlicontent=res.data
				})
				data.navLi.forEach(item => {
					if (item.department_one_id == obj) {
						item.show = ref(true)
					} else {
						item.show = ref(false)
					}
				})
				
			}

			const navliback = (obj) => {
				
				uni.navigateTo({
					url: '/pages/home/bookingReg/makeSelect/makeSelect?item='+JSON.stringify(obj)
				})
			}
			// #ifdef MP-WEIXIN
			const getCapsule = () => {
				// 获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				data.barhig = (menuButtonInfo.top + menuButtonInfo.height) * 2 + 'rpx';
			}
			getCapsule()
			
			// #endif
			const leftback = () => {
				uni.navigateBack({
					delta: 1
				});
			}
			return {
				...toRefs(data),
				sunnav,
				navliback,
				leftback
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		box-sizing: border-box;

		.hearder {
			// #ifdef MP-WEIXIN
			height: 18%;
			// #endif
			// #ifndef MP-WEIXIN
			height: 15%;

			// #endif
			.status-bar {
				height: var(--status-bar-height);
				width: 100%;
				background-color: #fff;
			}
		}
	}

	.content {
		padding: 0rpx 36rpx;
		box-sizing: border-box;

		.hearder-serch {
			position: relative;

			.search {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 20rpx;
			}
		}

		.uni-input {
			background-color: #f7f7f7;
			height: 72rpx;
			// text-indent: 1em;
			padding: 0 1em;
			border-radius: 36rpx;
			color: #ccc;
			font-size: 28rpx;
		}

	}

	.work-con {
		display: flex;
		// #ifdef MP-WEIXIN
		height: 82%;
		// #endif
		// #ifndef MP-WEIXIN
		height: 85%;
		// #endif

		box-sizing: border-box;
		padding-top: 20rpx;

		.fontis {
			font-size: 28rpx;
		}

		.work-left {
			width: 30%;
			background-color: #f7f7f7;
			display: flex;
			flex-flow: column;

			.nav-list {
				padding: 24rpx 36rpx;
				height: 60rpx;
				width: 100%;
				display: flex;
				align-items: center;

				.abs-tag {
					width: 8rpx;
					height: 36rpx;
					background-color: #0066ff;
					margin-right: 16rpx;
					border-radius: 4rpx;

				}

			}

			.hover {
				background-color: #fff;
			}

			.nav-list:hover {
				background-color: #fff;
			}
		}

		.work-right {
			padding: 36rpx;
			width: 70%;

			box-sizing: border-box;

			.work-bar {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 32rpx;


			}

			.subbaner {
				width: 100%;
				height: 200rpx;
				overflow: hidden;
				border-radius: 20rpx;
				margin-bottom: 40rpx;

				.img-subban {
					width: 100%;
					height: 160rpx;
					overflow: hidden;
				}
			}

		}
	}
</style>
